Uso del p5.js Web Editor

• Creazione del profilo
• Creazione dello sketch
• Creazione e caricamento dell'anteprima
• Centratura del canvas
• Consegna dello sketch
• Inclusione di una libreria
• Consigli
  • leggibilità/indentazione del codice
  • problemi nell'uso dell'interfaccia

Un'introduzione al Web Editor si può trovare nell'articolo Hello p5.js Web Editor! della Processing Foundation e nella relativa traduzione di Nilocram.

Creazione del profilo

• collegarsi al sito del p5.js Web Editor;
• cliccare sulla voce "Sign up";
• inserire i dati richiesti tenendo presente che lo "User Name" verrà inserito in tutti gli URL degli scketch, ad esempio: "https://editor.p5js.org/username/sketches/pt3EzG2nb"
  [fare attenzione a non far usare il vostro indirizzo email come nome utente]

Creazione dello sketch

• se non è già presente uno sketch di base, cliccare sulla voce di menu "File / New";
• modificare lo sketch;
• cambiare il nome proposto dall'editor (a destra di "Auto-refresh", sotto il menu);
• salvare lo sketch attraverso la voce di menu "File / Save".

L'elenco degli sketch salvati si può vedere attraverso la voce "My Account / My sketches" in alto a destra.

1. menu per il salvataggio (e l'eventuale creazione di un nuovo sketch);
2. nome dello sketch;
3. accesso agli sketch salvati.

Creazione e caricamento dell'anteprima

Per rendere riconoscibili gli sketch nella pagina sullo stato delle attività laboratoriali, o per eventuali altri usi futuri:

• cliccare con il tasto destro del mouse sul canvas in esecuzione e poi su "Salva immagine con nome...";
• salvare l'immagine sul proprio computer usando il nome "preview.png" (tutto in minuscolo);
• aprire il pannello dei file attraverso l'icona  a sinistra di "sketch.js";
• aprire il menu della cartella di progetto attraverso l'icona  a destra di "Sketch Files";
• cliccare su "Upload file" e poi su "Drop file here..." per selezionare l'immagine "preview.png" salvata in precedenza;
• verificare che il file caricato abbia mantenuto il nome corretto perché può capitare che venga modificato per evitare conflitti con file già presenti.

Centratura del canvas

Per centrare il canvas, anziché tenerlo in alto a sinistra, si può aprire il file "style.css":

e si possono aggiungere le seguenti regole CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
}
canvas {
    display: block;
}

Consegna dello sketch

Esercitazioni e progetto vanno consegnati nella classroom del corso indicando l'URL dello sketch e allegando lo ZIP scaricabile dal Web Editor attraverso "File / Download".

URL da indicare nella consegna.

Inclusione di una libreria

Se la libreria si trova anche su un server CDN (Content Delivery Network) è sufficiente:

• aggiungere un tag <script> con l'URL della libreria nel file "index.html", dopo i tag <script> delle librerie standard e prima di quello del file "sketch.js".

Se la libreria è disponibile solo come file da scaricare, è necessario:

• scaricare il file .js (ad es. "libreria.js") o l'eventuale versione minificata (ad es. "libreria.min.js") dal sito dell'autore;
  [su GitHub, se sono presenti delle versioni di distribuzione, è preferibile scaricare il file più recente della sezione "releases" a cui si accede attraverso il link sopra l'elenco dei file];
• caricare il file nella cartella di progetto del Web Editor [vedi modalità di caricamento dell'anteprima];
• aggiungere un tag <script> con il solo nome della libreria nel file "index.html", sempre dopo i tag <script> delle librerie standard e prima di quello del file "sketch.js";
  [se la libreria è stata caricata in una sottocartella (ad es. "libs"), nell'URL del tag <script> è necessario includerne il nome (ad es. "libs/libreria.js")].

Consigli

Leggibilità/indentazione del codice

Per rendere più comprensibile il codice conviene fare attenzione all'uso degli spazi fra il margine sinistro dell'editor e l'inizio di ogni riga (indentazione). Un uso casuale di questi spazi può rendere più difficile capire la struttura del codice e identificare eventuali errori. Il Web Editor è in grado di sistemare automaticamente le indentazioni attraverso la voce di menu "Edit / Tidy Code" che però agisce anche sulle spaziature dei parametri.

Problemi nell'uso dell'interfaccia

Il p5.js Web Editor attiva di default alcune opzioni per l'accessibilità alle persone con qualche forma di disabilità. In caso di problemi con l'interfaccia, si consiglia di disattivarle attraverso il pannello che si apre cliccando sulla rotellina rosa in alto a destra.